import { IsNotNullOrUndefined } from "@lib/helper";
import { createMemo, splitProps, type ParentComponent } from "solid-js";
import type { JSX } from "solid-js/jsx-runtime";

const ButtonGroup: ParentComponent<
  JSX.HTMLAttributes<HTMLDivElement> & {
    size?: "sm" | "lg";
    vertical?: boolean;
  }
> = (props) => {
  const [local, attributes] = splitProps(props, [
    "children",
    "size",
    "classList",
    "vertical",
  ]);
  const classList = createMemo(() => {
    return {
      [`btn-group${local.vertical ? "-vertical" : ""}`]: true,
      [`btn-group-${local.size}`]: IsNotNullOrUndefined(local.size),
      ...local.classList,
    };
  });

  return (
    <div role="group" classList={classList()} {...attributes}>
      {local.children}
    </div>
  );
};

export default ButtonGroup;
